<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>摄像头管理</title>
    <meta charset="utf-8">
    <style>
    	table{font-size:12px}
    </style>
    <script>
        $(document).ready(function() {
        	        
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	            	{ type: "separator" },
	                { type: "button", text: "刷新",click: queryCustomerList },
	                { type: "button", text: "保存",click: saveEzviz },
	            ]
	        });
	        
          	parkDataSource = new  kendo.data.DataSource({
            	transport: {
                    read:  {
                        url: "${path}/commonSel/getParkSel",
                        dataType: "json"
                    }
                }
            });
            
        	$("#park").kendoComboBox({
			    dataTextField: "name",
			    dataValueField: "id",
			    dataSource: parkDataSource,
			    value:"${kids_parkID}"
			});
			
			//var combobox = $("#park").data("kendoComboBox");
			//combobox.select(function(dataItem) {
			//   return dataItem.id == "51c7325f-3c91-484f-85d0-1feecef70116";
			//});

	        
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/ezviz/queryEzviz",
                        dataType: "json",
                        data: function() {
					        return {
					         	//kids_park_id:$("#park").data("kendoComboBox").value(),
					         	//productName:$("#productName").val()
					        };
					    }
                    }
                },
                //group: [{field: "kidsPark"}],
                serverPaging: false,
                serverFiltering: true,
                schema: {
                	data:"data",
               		model: {
				        fields: {
				        	cameraName: {editable: false},
				        	deviceName: {editable: false},
				        	picUrl: {editable: false},
				        	kidsPark: {editable: true,defaultValue:{id:"",name:""}},
				        	ezvizType: {editable: true,defaultValue:{code:"",name:""}},
				        	ezvizName: {editable: true}
				        }
				    }
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                selectable: "multiple row",
                allowCopy: true,
                //groupable: {
                //    messages: {
                //      empty: "将列拖拽到此处进行分类查看"
                //    }
                //},
                editable: 'incell',
                columns: [
                	{ field:"picUrl", title: "照片",width: "150px",editable: false,template:photoFun},
                	{ field:"cameraName", title: "摄像头名",width: "150px",editable: false},
                	{ field:"deviceName", title: "设备名",width: "150px",editable: false},
                	{ field:"kidsPark", title: "门店",width: "100px",editor:ezvizParkTemp,template:function(data){var value = ""; if(data.kidsPark){value = data.kidsPark.name;} return value;}},
                	{ field:"ezvizType", title: "类型",width: "100px",editor:ezvizTypeTemp,template:function(data){var value = ""; if(data.ezvizType){value = data.ezvizType.name;} return value;}},
                	{ field:"product", title: "对应产品",width: "100px",editor:productTemp,template:function(data){var value = ""; if(data.product){value = data.product.name;} return value;}},
                    { field:"ezvizName", title: "名称",width: "100px"},
                	{ command: [{name:"clearEzviz",text:"清除",click:delEzviz}], 
                    	attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "文字", width: "80px" }
                ]
            });
            
            $('#grid').css("height",document.body.clientHeight-40);
		});
        
      	//清除摄像头
		var delEzviz = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            $.ajax({
		        url: "${path}/ezviz/delEzviz",
		        dataType: 'json',
   				//contentType: "application/json",
		        data: {id:data.ezvizId},
		        //type:"POST", 
		        success: function (text) {
		        	$("#grid").data("kendoGrid").dataSource.fetch();
		        	toastr.info(text.msg, "提示", toastrOptsBottom);
		        },
		        error: function (jqXHR, textStatus, errorThrown) {
		        	toastr.info("与远程服务器交互异常，请规范操作或重新登录", "提示", toastrOptsBottom);
		        }
		    });
			//$.fancybox($("#textlist"));
		}
        
      	//查看视频
		var ezvizInfo = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            //setFormData(data);
            $('#videolist').attr('href','${path}/assist/videolist?c_user_id='+data.cid);
			$.fancybox($("#videolist"));
		    //var dInfo = dialog({
			//	title: '消息',
			//	resize: true,
			//	content: document.getElementById("inlineForm")
		    //})
			//dInfo.showModal();
		}
        
        var photoFun = function(dataItem){
			return "<img src='"+dataItem.picUrl+"' alt='' style='width:200px;height:120px'/>";
		}
        
        var ezvizParkTemp = function(container, options){
        	var input = $("<input/>");
		    input.attr("name", options.field);
		    input.appendTo(container);
		    input.kendoComboBox({
			    dataValueField: "id",
			    dataTextField: "name",
			    dataSource: new kendo.data.DataSource({
	            	transport: {
	                    read:{
	                        url: "${path}/commonSel/getParkSel",
	                        dataType: "json"
	                    }
	                }
	            })
		    })
		}
        
        var productTemp = function(container, options){
        	var input = $("<input/>");
		    input.attr("name", options.field);
		    input.appendTo(container);
		    input.kendoComboBox({
			    dataValueField: "code",
			    dataTextField: "name",
			    dataSource: new kendo.data.DataSource({
	            	transport: {
	                    read:{
	                        url: "${path}/commonSel/signProductSel",
	                        dataType: "json"
	                    }
	                }
	            })
		    })
		}
        
        var ezvizTypeTemp = function(container, options){
        	var input = $("<input/>");
		    input.attr("name", options.field);
		    input.appendTo(container);
		    input.kendoComboBox({
			    dataValueField: "code",
			    dataTextField: "name",
			    dataSource: new kendo.data.DataSource({
	            	transport: {
	                    read:{
	                        url: "${path}/common/getBaseCodeList?type=ezviz_type",
	                        dataType: "json"
	                    }
	                }
	            })
		    })
		}
		
		var queryCustomerList = function(e){//查询
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		var saveEzviz = function(e){
			var grid = $("#grid").data("kendoGrid");
			var checkedArr = new Array();
			$.each(grid.items(), function (i, item) {
				var curData = grid.dataItem(item);
				checkedArr.push(curData);
			});
			
			//console.log(checkedArr);
			
			$.ajax({
		        url: "${path}/ezviz/saveEzviz",
		        dataType: 'json',
   				contentType: "application/json",
		        data: JSON.stringify(checkedArr),
		        type:"POST", 
		        success: function (text) {
		        	$("#grid").data("kendoGrid").dataSource.fetch();
		        	toastr.info(text.msg, "提示", toastrOptsBottom);
		        },
		        error: function (jqXHR, textStatus, errorThrown) {
		        	toastr.info("与远程服务器交互异常，请规范操作或重新登录", "提示", toastrOptsBottom);
		        }
		    });
		}
		
		var toolbarTemp = function(dataItem){
			return "<label>时间:</label><input name='querydate' id='querydate' class='k-textbox'>";
		}
		
    </script>
</head>
<body>
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
</body>
</html>
